<template>
	<view class="wpprs">
		<view class="title">产品信息</view>
		<view class="getCode" @click="getcode" v-if="!product.name">
			<image class="bacimg" src="../../static/images/scanBorder.png"></image>
			<view class="icons">
				<image class="xiangji" src="../../static/images/iconCamera.png"></image>
				<view class="codes">扫描仪器二维码</view>
			</view>
		</view>
		<view class="chanpin" v-if="product.name">
			<image :src="product.productImg"></image>
			<view class="ctn">
				<view>品牌：{{ product.brand }}</view>
				<view>类别：{{ product.category }}</view>
				<view>名称：{{ product.name }}</view>
				<view class="sn">SN：{{ product.serial }}</view>
			</view>
		</view>
		<view class="toping">
			<view class="ts">联系方式</view>
			<view class="line">
				<view>姓名</view>
				<input type="text" v-model="contact" placeholder="请输入姓名" />
			</view>
			<view class="line">
				<view>联系电话</view>
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入电话" />
			</view>
			<view class="line">
				<view>地址</view>
				<view class="r">
					<uni-data-picker
						class="datpicker"
						:map="{ text: 'fullName', value: 'id' }"
						:localdata="regionTreeCountyList"
						@change="bindChange"
						placeholder="请选择区域"
						popup-title="请选择区域"
					></uni-data-picker>
				</view>
			</view>
			<view class="line noline"><input class="xq" v-model="address" type="text" placeholder="请输入详细地址" /></view>
		</view>
		<view class="timerbox">
			<view>
				<view class="ts">期望上门日期</view>
				<view class="timer" @click="datetime">{{ expectDate || '选择日期' }}{{ '>' }}</view>
			</view>
			<view>
				<view class="ts">期望上门时段</view>
				<view class="timer">
					<!-- {{expectStartTime}}~{{expectEndTime}}{{'>'}} -->
					<uni-data-select class="timerLine" v-model="timerLine" :localdata="range"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="shuoming">
			<view>报修说明</view>
			<textarea type="text" v-model="remark" placeholder="请输入报修说明"></textarea>
			<view>
				<image class="setimgs" src="../../static/images/iconPickerBg.png" @click="getImg"></image>
				<view class="setmps" v-for="(item, idx) in imgList" :key="idx">
					<image class="icons" src="../../static/images/iconContactsDelete.png" @click="imgList.splice(idx, 1)"></image>
					<image class="imglist" :src="item"></image>
				</view>
			</view>
		</view>
		<view class="submit" @click="phoneReport">确定</view>
		<view class="datetime"><uni-datetime-picker ref="datetime" type="date" :clear-icon="false" v-model="expectDate" /></view>
	</view>
</template>

<script>
import { getProduct, workOrderPetition, regionTreeCounty } from '../../api/order.js';
export default {
	name: 'reportforrepair',
	data() {
		return {
			indicatorStyle: `height: 50px;`,
			imgList: [],
			regionTreeCountyList: [],
			product: {},
			timerLine: '',
			index: null,
			pickerValue: '',

			productId: '',
			contact: '',
			phone: '',
			regionId: [],
			address: '',
			expectDate: '',
			expectStartTime: '',
			expectEndTime: '',
			remark: '',

			range: [
				{ value: '07:00~09:00', text: '07:00~09:00' },
				{ value: '09:00~11:00', text: '09:00~11:00' },
				{ value: '11:00~13:00', text: '11:00~13:00' },
				{ value: '13:00~15:00', text: '13:00~15:00' },
				{ value: '15:00~17:00', text: '15:00~17:00' }
			]
		};
	},
	onLoad(e) {
		regionTreeCounty().then((data) => {
			console.log('regionTreeCounty', data.content);
			this.regionTreeCountyList = data.content;
		});
		if (e.id) {
			this.productId = e.id;
			getProduct({ id: e.id }).then((data) => {
				console.log(data.content);
				this.product = data.content;
			});
		}
	},
	methods: {
		bindChange(val) {
			console.log(val.detail.value);
			val.detail.value.forEach((data) => {
				this.regionId.push(data.value);
			});
		},
		datetime() {
			this.$refs.datetime.show();
		},
		phoneReport() {
			workOrderPetition({
				type: 2,
				isRenewal: 0,
				contact: this.contact,
				phone: this.phone,
				regionId: this.regionId[2],
				address: this.address,
				expectDate: new Date(this.expectDate + `${' '}00:00:00`).getTime(),
				expectStartTime: new Date(this.expectDate + `${' '}${this.timerLine.split('~')[0]}:00`).getTime(),
				expectEndTime: new Date(this.expectDate + `${' '}${this.timerLine.split('~')[1]}:00`).getTime(),
				remark: this.remark,
				images: this.imgList.join(','),
				productDTOS: [
					{
						id: this.productId
					}
				]
			}).then((data) => {
				uni.navigateBack({ delta: 1 });
			});
		},
		getcode() {
			let _this = this;
			uni.scanCode({
				onlyFromCamera: true,
				success(res) {
					//扫码结果
					let id = res.result.split('=')[1];
					_this.productId = id;
					getProduct({ id: id }).then((data) => {
						console.log(data.content);
						_this.product = data.content;
					});
				}
			});
		},
		getImg() {
			let _this = this;
			uni.chooseImage({
				count: 6, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success(res) {
					_this.imgList = [..._this.imgList, ...res.tempFilePaths];
					console.log(JSON.stringify(res.tempFilePaths));
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.wpprs {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-image: url('https://junminyiqi.oss-cn-shanghai.aliyuncs.com/flies/d29eccf2-f7be-dbc8-4853-e3b19055825b.png');
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 30upx;
	box-sizing: border-box;
	background-color: #f1f1f1;
	overflow: auto;
	.mypopup {
		.picker-view {
			width: 750upx;
			height: 600upx;
			margin-top: 20upx;
		}
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
	.datetime {
		width: 0;
		height: 0;
		overflow: hidden;
	}
	.chanpin {
		padding: 30upx;
		background-color: #fff;
		border-radius: 10upx;
		display: flex;
		image {
			width: 200upx;
			height: 200upx;
		}
		.ctn {
			padding: 20upx;
			font-size: 26upx;
			view {
				padding-bottom: 10upx;
			}
			.sn {
				padding: 0;
			}
		}
	}
	.submit {
		margin-top: 30upx;
		padding: 26upx;
		background: red;
		border-radius: 60upx;
		text-align: center;
		color: #fff;
	}
	.timerbox {
		background-color: #fff;
		border-radius: 10upx;
		margin-top: 30upx;
		padding: 30upx;
		& > view {
			display: flex;
			padding: 10upx 0;
			.ts {
				width: 280upx;
			}
			.timer {
				width: 100%;
				text-align: right;
				/deep/.uni-stat__select {
					transform: translateY(-10upx);
				}
				/deep/.uni-select {
					border: none;
				}
				/deep/.uni-select__input-placeholder {
					color: #000;
					font-size: 32upx;
				}
			}
		}
	}
	.toping {
		background-color: #fff;
		border-radius: 10upx;
		margin-top: 30upx;
		padding: 30upx;
		.ts {
			font-weight: 500;
			padding-bottom: 20upx;
		}
		.line {
			display: flex;
			padding: 20upx 0;
			border-bottom: 1px #ccc solid;
			view {
				width: 180upx;
			}
			input {
				width: 100%;
				text-align: right;
			}
			.xq {
				text-align: left;
			}
			.r {
				text-align: right;
				width: 100%;
				.datpicker {
					text-align: left;
					/deep/.input-value-border {
						border: none;
						height: 46upx;
						text-align: right;
					}
					/deep/.selected-list {
						text-align: right;
					}
				}
			}
		}
		.noline {
			border: none;
		}
	}
	.title {
		padding-left: 20upx;
		border-left: 6upx #fff solid;
		color: #fff;
	}
	.getCode {
		width: 100%;
		height: 160upx;
		background-color: #fff;
		margin-top: 30upx;
		position: relative;
		border-radius: 10upx;
		.bacimg {
			width: 100%;
			height: 160upx;
			position: absolute;
		}
		.icons {
			text-align: center;
			.codes {
				display: inline-block;
				padding-left: 20upx;
			}
			.xiangji {
				width: 88upx;
				height: 88upx;
				display: inline-block;
				transform: translateY(30upx);
			}
		}
	}
	.shuoming {
		padding: 20upx;
		background: #fff;
		border-radius: 10upx;
		margin-top: 30upx;
		textarea {
			width: 100%;
			height: 150upx;
			margin-top: 20upx;
		}
		.setimgs,
		.setmps {
			display: inline-block;
			margin-top: 20upx;
			margin-right: 20upx;
			width: 170upx;
			height: 170upx;
		}
		.setmps {
			position: relative;
			.icons {
				position: absolute;
				right: 0;
				top: 0;
				width: 40upx;
				height: 40upx;
			}
			.imglist {
				width: 170upx;
				height: 170upx;
			}
		}
	}
}
</style>
